<template>
  <div class="mobile-filter-container">
    <!-- 筛选结果提示 -->
    <div class="filter-indicator" v-if="hasActiveFilters">
      <div class="indicator-content">
        <span>
          <i class="el-icon-info"></i>
          已筛选: {{ activeFiltersText }}
        </span>
        <i class="el-icon-close" @click="resetQuery"></i>
      </div>
    </div>

    <!-- 筛选触发按钮 -->
    <div class="mobile-filter-trigger" @click.stop="showFilter">
      <i class="el-icon-s-operation"></i>
      <span class="filter-text">筛选</span>
      
      <!-- 首次显示的提示气泡 -->
      <div class="filter-tooltip" v-if="showFilterTip">
        点击这里筛选数据
        <div class="tooltip-arrow"></div>
      </div>
    </div>

    <!-- 筛选面板 -->
    <el-drawer
      title="筛选条件"
      :visible.sync="filterVisible"
      direction="btt"
      size="auto"
      :append-to-body="true"
      :wrapperClosable="true"
      class="mobile-filter-drawer"
    >
      <div class="mobile-filter-form">
        <el-form :model="queryParams" label-position="top" size="small">
          <el-form-item label="开始日期">
            <el-date-picker
              v-model="queryParams.startDate"
              type="date"
              placeholder="选择开始日期"
              style="width: 100%"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="结束日期">
            <el-date-picker
              v-model="queryParams.endDate"
              type="date"
              placeholder="选择结束日期"
              style="width: 100%"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="数据来源">
            <el-select v-model="queryParams.source" placeholder="请选择数据来源" clearable style="width: 100%">
              <el-option label="上海铝价" value="shanghai"></el-option>
              <el-option label="长江铝价" value="changjiang"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="手动更新">
            <el-select v-model="queryParams.manualUpdate" placeholder="请选择" clearable style="width: 100%">
              <el-option label="是" :value="1"></el-option>
              <el-option label="否" :value="0"></el-option>
            </el-select>
          </el-form-item>
          <div class="mobile-filter-btns">
            <el-button type="primary" icon="el-icon-search" @click.stop="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" @click.stop="resetQuery">重置</el-button>
          </div>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: 'MobileFilter',
  props: {
    value: {
      type: Object,
      required: true
    },
    showFilterTip: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      queryParams: {
        startDate: this.value.startDate || '',
        endDate: this.value.endDate || '',
        source: this.value.source || '',
        manualUpdate: this.value.manualUpdate !== undefined ? this.value.manualUpdate : null
      },
      filterVisible: false
    };
  },
  computed: {
    // 是否有激活的筛选条件
    hasActiveFilters() {
      return this.queryParams.startDate || 
             this.queryParams.endDate || 
             this.queryParams.source || 
             this.queryParams.manualUpdate !== null;
    },
    // 获取当前激活的筛选条件文本
    activeFiltersText() {
      const filters = [];
      
      if (this.queryParams.startDate) {
        filters.push(`从${this.queryParams.startDate}`);
      }
      
      if (this.queryParams.endDate) {
        filters.push(`到${this.queryParams.endDate}`);
      }
      
      if (this.queryParams.source) {
        filters.push(this.queryParams.source === 'shanghai' ? '上海铝价' : '长江铝价');
      }
      
      if (this.queryParams.manualUpdate !== null) {
        filters.push(this.queryParams.manualUpdate ? '手动更新' : '自动爬取');
      }
      
      return filters.join(', ');
    }
  },
  watch: {
    value: {
      handler(newVal) {
        this.queryParams = {
          startDate: newVal.startDate || '',
          endDate: newVal.endDate || '',
          source: newVal.source || '',
          manualUpdate: newVal.manualUpdate !== undefined ? newVal.manualUpdate : null
        };
      },
      deep: true
    }
  },
  methods: {
    // 显示筛选面板
    showFilter() {
      this.filterVisible = true;
      this.$emit('filter-tip-click');
    },
    
    // 搜索按钮点击
    handleQuery() {
      // 只更新筛选相关参数，不影响分页参数
      const filterParams = {
        startDate: this.queryParams.startDate,
        endDate: this.queryParams.endDate,
        source: this.queryParams.source,
        manualUpdate: this.queryParams.manualUpdate
      };
      
      // 保留原有的page和size等参数
      this.$emit('input', { ...this.value, ...filterParams, page: 1 });
      this.$emit('query');
      this.filterVisible = false;
    },
    
    // 重置按钮点击
    resetQuery() {
      const resetParams = {
        startDate: '',
        endDate: '',
        source: '',
        manualUpdate: null
      };
      
      // 保留原有的page和size等参数
      this.$emit('input', { ...this.value, ...resetParams });
      this.$emit('reset');
    }
  }
}
</script>
